<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h1>iframe</h1>
    <button class="btn">发送消息</button>
    <!-- 同源的 -->
    <iframe src="/origin.html" frameborder="0" class="origin-iframe"></iframe>

    <!-- 不同源的 -->
    <iframe
      src="http://127.0.0.1:5500/day01/no-origin-iframe.html"
      frameborder="0"
      class="no-origin-iframe"
    ></iframe>
    <script>
      // 父页面获取子页面数据
      // const originFrameEl = document.querySelector(".origin-iframe");
      // console.dir(originFrameEl.contentWindow); // 就是子页面 window 对象
      // console.dir(originFrameEl.contentDocument); // 就是子页面 document 对象
      // originFrameEl.contentWindow.onload = function () {
      //   console.log(originFrameEl.contentDocument.querySelector(".title"));
      //   console.log(originFrameEl.contentWindow.person);
      // };

      // 非同源情况下：父页面不能操作子页面
      // const noOriginFrameEl = document.querySelector(".no-origin-iframe");
      // console.dir(noOriginFrameEl.contentWindow); // 就是子页面 window 对象
      // console.dir(noOriginFrameEl.contentDocument); // 就是子页面 document 对象

      // noOriginFrameEl.contentWindow.onload = function () {
      //   console.log("onload");
      //   console.log(noOriginFrameEl.contentDocument.querySelector(".title"));
      //   console.log(noOriginFrameEl.contentWindow.person);
      // };

      // 非同源情况下：postMessage 发送消息 onMessage 接受消息
      document.querySelector(".btn").onclick = function () {
        const noOriginFrameEl = document.querySelector(".no-origin-iframe");
        noOriginFrameEl.contentWindow.postMessage(
          "token ~~~~~",
          "http://127.0.0.1:5500"
        );
      };

      window.addEventListener("message", function (e) {
        console.log("接受到子页面消息", e.data);
      });
    </script>
  </body>
</html>
